<script>
    // 当前的订阅者
    let activeEffect;
    // 依赖追踪类
    class Dep {
        // 订阅者集合
        subscribers = new Set();
        // 添加订阅者
        depend() {
            if (activeEffect) {
                this.subscribers.add(activeEffect);
            }
        }
        // 通知订阅者
        notify() {
            this.subscribers.forEach(effect => {
                effect()
            })
        }
    }
    // 保留此次订阅
    function watchEffect(effect) {
        activeEffect = effect;
        effect();
        activeEffect = null;
    }
    // 双向绑定
    function reactive(raw){
        // vue2写法
        Object.keys(raw).forEach(key =>{
            const dep = new Dep();
            let value = raw[key];
            Object.defineProperty(raw, key, {
                get(){
                    dep.depend();
                    return value;
                },
                set(newValue){
                    value = newValue;
                    // 通知订阅者
                    dep.notify();
                }
            })
        })
        return raw;
    }
    const state = reactive({
        count: 0
    });
    watchEffect(() => {
        console.log(state.count)
    })
    state.count++;
</script>